<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>办件进度详情列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{padding:0;position:absolute;width:7.5rem;height:100%;top:0;left:0;z-index:1000;background-color:transparent;}
			.mui-bar-nav{height:1.05rem;}
			.mui-icon-closeempty{font-size:.8rem;position:absolute;top:.14rem;left:.2rem;color:#fff;}
			/*切换菜单*/
			.mui-slider{position:relative;}
			.mui-segmented-control{width:4rem;overflow:hidden;margin:.16rem auto;background:transparent;border-radius:.1rem;height:.6rem;line-height:.6rem;margin-bottom:.19rem;border:1px solid #fff;overflow:hidden;}
			.mui-segmented-control .mui-control-item{line-height:.7rem;font-size:.3rem;color:#fff;}
			.mui-segmented-control .mui-control-item.mui-active{background:#fff;color:#104ffc;}
	        /*基本信息*/
	        .control_cont{width:100%;float:left;overflow:auto;}
	        .basic_info{width:100%;float:left;padding:0;margin:0;}
		    .basic_info>li{width:100%;height:.85rem;line-height:.85rem;border-bottom:1px solid #e5e5e5;background:#fff;float:left;}
		    .basic_info>li>label,.basic_info>li>a>label{width:2.4rem;float:left;text-align:left;font-size:.28rem;color:#999;box-sizing:border-box;padding-left:.25rem;}
		    .basic_info>li>span,.basic_info>li>a>span{font-size:.28rem;color:#333;width:3.7rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:1rem;}
			.work_name{width:100%;padding:.25rem .2rem;box-sizing:border-box;background:#fff;margin-bottom:.1rem;float:left;}
			.work_name>img{width:.82rem;height:.86rem;float:left;margin-right:.25rem;}
			.work_name>h5{width:5rem;float:left;line-height:.35rem;font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;margin:.05rem 0 0 0;}
			.work_name>.file_num{width:5rem;float:left;line-height:.3rem;font-size:.28rem;color:#666;margin-top:.12rem;}
			.mui-icon-arrowright{float:right;color:#adadad;font-size:.28rem;margin-top:-.3rem;}
			.mui-icon-arrowright:before{font-size:.36rem;float:right;margin-top:-.04rem;}
			.blue{color:#104ffc;}
			.basic_info>li>a{display:block;width:100%;float;left;}
			.basic_info>li .mui-icon-arrowright{margin:.17rem 0 0 .05rem;float:left;}
			.choose{width:1.9rem;float:left;color:#17bb13;}
		    .choose>b{width:.3rem;height:.3rem;float:left;margin-right:.1rem;background:url(../../images/work/zbxz-@2x.png) no-repeat;background-size:100% 100%;margin-top:.28rem;}
	        .choose>.actb{background:url(../../images/jindu/result2x.png) no-repeat;background-size:100% 100%;}
			.control_cont h6{width:100%;float:left;height:.7rem;line-height:.7rem;font-size:.3rem;color:#333;margin:0}
			.control_cont h6>img{width:.34rem;float:left;margin:.178rem .13rem 0 .3rem;}
			.basic_info>li>.cailiao{color:#333;width:6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			.basic_info>li>span>.show{display:block;color:#104ffc;border:1px solid #104ffc;border-radius:.3rem;padding:0 .25rem;font-size:.3rem;float:right;height:.5rem;line-height:.5rem;margin-top:.172rem;}
			.basic_info>li>.gray{float:right;color:#999;font-size:.3rem;text-align:right;}
			
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="mui-content" id='app'>
			<div class="mui-slider">
			<div class="control_cont">
				<div class="mui-control-content mui-active" v-if="is_show">
					<ul class="basic_info" style="margin-top: 5px;" v-if="zwfwCaseMaterial_show" v-for="material in zwfwCaseMaterialRecords">
					 	<li>
					 		<label>文件名</label>
					 		<span>{{material.originName}}</span>
					 	</li>
					 	<li>
					 		<label>附件类型</label>
					 		<span>文档</span>
					 	</li>
					 	<li>
					 		<label>上传时间</label>
					 		<span>{{material.isSqsj}}</span>
					 	</li>
					 	<li>
					 		<label>操作</label>
					 		<span><a class="blue" type="xz" :id='material.oid' :fileType="material.extensionName">下载</a></span>
					 	</li>
				    </ul>
				    <ul class="basic_info" style="margin-top: 5px;"  v-if="eleclicenVo_show" v-for="eleclicenVo in eleclicenVos">
					 	<li>
					 		<label>文件名</label>
					 		<!--<span>{{eleclicenVo.name}}</span>-->
					 		<span>电子证照</span>
					 	</li>
					 	<li>
					 		<label>附件类型</label>
					 		<span>pdf文档</span>
					 	</li>
					 	<li>
					 		<label>上传时间</label>
					 		<span></span>
					 	</li>
					 	<li>
					 		<label>操作</label>
					 		<span>
								  <a v-if="eleclicenVo.attaId" class="blue" type="yl" :id='eleclicenVo.attaId' :fileType='eleclicenVo.attaType'>下载</a>
								  <a v-else class="blue" type="licenseNumber" :licenseNumber='eleclicenVo.licenseNumber'>下载</a>
					 		</span>
					 	</li>
				    </ul>
				</div>
			</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript" src="../../js/file.js" ></script>
		<script>
			mui.plusReady(function() {
				var caseMaterialOid = utils.getUrlParam("caseMaterialOid");
				loadData(caseMaterialOid);
			});
			
			var itemContents = new Vue({
				el: '#app',
				data: {
					zwfwCaseMaterialRecords: [], 
					eleclicenVos: [], 
					eleclicenVo_show:false, 
					zwfwCaseMaterial_show:true, 
					is_show:false
				}
				
			});
			
			/**
			 * 加载数据
			 * @param {Object} caseMaterialOid 主键
			 */
			function loadData(caseMaterialOid){
				utils.showWaiting();
				var param = 'caseMaterialOid=' + caseMaterialOid;
				var url = 'appHttpService/viewZwfwMaterial.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.code == 0) {
						//材料信息
						if(data.zwfwCaseMaterialRecordList != undefined && data.zwfwCaseMaterialRecordList != null){
							itemContents.zwfwCaseMaterial_show = true;
							itemContents.is_show = true;
							itemContents.zwfwCaseMaterialRecords = itemContents.zwfwCaseMaterialRecords.concat(convertMaterials(JSON.parse(data.zwfwCaseMaterialRecordList)));
						}
						if(data.eleclicenVoList != undefined && data.eleclicenVoList != null){
							itemContents.eleclicenVo_show = true;
							itemContents.is_show = true;
							itemContents.eleclicenVos = itemContents.eleclicenVos.concat(convertEleclicenVoList(JSON.parse(data.eleclicenVoList)));
						}
						if(data.zwfwCaseMaterial != undefined && data.zwfwCaseMaterial != null){
							itemContents.eleclicenVo_show = true;
							itemContents.is_show = true;
							var newItems = [];
							newItems.push({
								licenseNumber:JSON.parse(data.zwfwCaseMaterial).licenseNumber
							});
							itemContents.eleclicenVos = itemContents.eleclicenVos.concat(newItems);
						}
						
					}
					closeWaitingAndShowView();
				}, param);
			}
			
			/**
			 * 材料信息字段组装
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * @param {Object} items 将服务端返回数据，转换成前端需要的格式
			 */
			function convertEleclicenVoList(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						name: item.name,
						attaType:item.attaType,
						attaId: item.attaId
					});
				});
				return newItems;
			}
			
			/**
			 * 材料信息字段组装
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * @param {Object} items 将服务端返回数据，转换成前端需要的格式
			 */
			function convertMaterials(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						originName: item.sysAtta.originName,
						oid: item.sysAtta.oid,
						extensionName:item.sysAtta.extensionName,
						isSqsj: item.sysAtta.uploadDate
					});
				});
				return newItems;
			}
			
			//下载
			mui("body").on('tap', '.basic_info .blue', function() { 
				var type = this.getAttribute("type");
				var oid = this.getAttribute("id");
				var fileType = this.getAttribute("fileType");
				var licenseNumber = this.getAttribute("licenseNumber");
				if(type == 'xz'){
					var url = utils.HOST + 'appCommon/appDownLoadSysAtta.do?oid=' + oid;
					
					//开始下载
					showOrDown(url,oid,null,fileType,function(path){
						openDir(path);
					})
					
				}else if(type == 'yl'){
					var filename = Math.floor(Math.random() * 100000000 + 10000000).toString() + '.' + fileType;
					var url = utils.HOST + 'appHttpService/appDownLoadEleclicen.do?oid=' + oid;
					//开始下载
					showOrDown(url,oid,null,fileType,function(path){
						openDir(path);
					})
				
				}else if(type == 'licenseNumber'){
					var fileType_ = 'pdf';
					var filename = Math.floor(Math.random() * 100000000 + 10000000).toString() + '.' + fileType_;
					var url = utils.HOST + 'appHttpService/downLicenByLicenNumber.do?licenseNumber=' + licenseNumber;
					//开始下载
					showOrDown(url,licenseNumber,null,fileType_,function(path){
						openDir(path);
					})
				}
			});
		</script>
	</body>
</html>
